<template>
  <div class="fr page">
    <div class="sui-pagination clearfix">
      <ul>  
        <li class="prev">
          <a href="#"  @click="$emit('getPageNo',pageNo-1)"><i class="crumbs-arrow" :disabled="pageNo==1">&lt;</i></a>
        </li>
        <li>
          <a href="#" v-if="startNumAndEndNum.start > 1" @click="$emit('getPageNo',1)" :class="{active:pageNo==1}">1</a>
        </li>
        <li class="dotted"   v-if="startNumAndEndNum.start > 2"><span>...</span></li>
        <li v-for="(page,index) in startNumAndEndNum.end" :key="index" >
          <a href="#" v-if="page >= startNumAndEndNum.start" @click="$emit('getPageNo',page)" :class="{active:pageNo==page}">{{page}}</a>
        </li>

        <li class="dotted" v-if="startNumAndEndNum.end < totalPage - 1"><span >...</span></li>
        <li>
          <a href="#" v-if="startNumAndEndNum.end < totalPage" @click="$emit('getPageNo',totalPage)" :class="{active:pageNo==totalPage}">{{totalPage}}</a>
        </li>
        <li class="next">
          <a href="#"><i class="crumbs-arrow" @click="$emit('getPageNo',pageNo+1)" :disabled="pageNo==totalPage">&gt;</i></a>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Pagination',
  props:['pageNo','pageSize','total','continues'],
  // startNumAndEndNum: '',
  computed: {
    // 计算出总的页码数
    totalPage() {
      return Math.ceil(this.total/this.pageSize);
    },
    // 计算出连续的页码的起始数字与结束数字
    startNumAndEndNum() {
      const {continues,pageNo,totalPage} = this;
      let start = 0, end = 0;
      if(continues > totalPage) {
        start = 1;
        end = totalPage;
      }else {
        start = pageNo - parseInt(continues / 2);
        end = pageNo + parseInt(continues / 2);
        if(start < 1){
          start = 1;
          end = continues;
        }else if(end > totalPage) {
          start = totalPage - continues + 1;
          end = totalPage;
        }
      }
      return {start,end};
    }
  }
};
</script>

<style lang="less" scoped>
.page {
  width: 100%;
  margin: 0 auto;
  .sui-pagination {
    margin: 18px 0;

    ul {
      vertical-align: middle;
      width: 100%;
      margin: 0 auto;
      li {
        line-height: 18px;
        display: inline-block;
        .active {
            color: #e1921b;
        }
        a {
          position: relative;
          float: left;
          line-height: 18px;
          text-decoration: none;
          margin-left: -1px;
          font-size: 14px;
          padding: 9px 18px;
          color: rgb(143, 140, 140);
        }
        &.active {
          a {
            color: #e1921b;
            cursor: default;
          }
        }

        &.disabled {
          a {
            color: #999;
            cursor: default;
          }
        }

        &.dotted {
          span {
            margin-left: -1px;
            position: relative;
            float: left;
            line-height: 18px;
            text-decoration: none;
            font-size: 14px;
            border: 0;
            padding: 9px 18px;
            color: rgb(143, 140, 140);
          }
        }
      }
    }
  }
}
</style>